<template>
	<view>
		<QS-DynamicForm ref="form" labelPosition="right" labelWidth="100rpx" :rules="rules" :formItems="formItems">
			<template slot="slot-1">
				<view>
					123
				</view>
			</template>
			<template slot="slot-2">
				<view>
					234
				</view>
			</template>
		</QS-DynamicForm>
		<QS-P height="60rpx"></QS-P>
		<QS-Button theme="primary" @click="changeFormItems">改变formItems</QS-Button>
		<QS-P height="20rpx"></QS-P>
		<QS-Button theme="primary" @click="submit">获取表单数据</QS-Button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formItems: [
					{ label: '姓名' },
					{ label: '手机', prop: 'phone' },
					{ label: '单选', formType: 'radio', prop: 'radio', itemArray: [{name:'1', value: '1'}, {name: '2', value: '2'}] },
					{ label: '多选', formType: 'checkbox', prop: 'checkbox', itemArray: [{name:'1', value: '1'}, {name: '2', value: '2'}] },
				],
				rules: {
					address: [
						{ required: true },
						{ minLength: 3 }
					],
					phone: [
						{ required: true }
					]
				}
			}
		},
		methods: {
			changeFormItems() {
				this.formItems = [
					{ label: '地址', prop: 'address' },
					{ label: '姓名', prop: 'name' }
				]
			},
			submit() {
				this.$refs.form.submit()
					.then(res=>{
						uni.$qs.toast('获取表单数据成功');
						console.log(res);
					})
					.catch(err=>{
						uni.$qs.toast(err.message);
						console.log(err)
					})
			}
		}
	}
</script>

<style>

</style>
